<script setup lang="ts">
import {
  ref,
  reactive,
  withDefaults,
  toRefs,
  defineExpose,
  onMounted,
  nextTick
} from "vue";
import ReCol from "@/components/ReCol";
import { useHook } from "./hook";
import { FormProps } from "./types.ts";
import { transformI18n } from "@/plugins/i18n";
import { IconSelect } from "@/components/ReIcon";
import Segmented from "@/components/ReSegmented";
import ReAnimateSelector from "@/components/ReAnimateSelector";
import type { FormRules } from "element-plus";
import { ElNotification, ElMessage, ElTable, ElForm } from "element-plus";
import { Plus, Minus } from "@element-plus/icons-vue";

import SingleUpload from "@/components/ReUpload/singleUpload.vue";
import MultiUpload from "@/components/ReUpload/multiUpload.vue";
import Editor from "@/components/Wangeditor/index.vue";

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    higherOptions: [], //其他数据
    dictOptionData: {}, //字典类型数据
    id: null,
    name: null,
    picUrl: "",
    subPicUrls: [],
    subTitle: "", //副标题
    productCategoryId: "",
    platformCategoryId: "",
    brandId: "",
    freightTemplateId: "",
    productSn: "", //货号
    feedings: "", //加料
    publishing: false, //是否发布
    newGoods: false, //是否新品
    recommend: false, //是否推荐
    unit: "",
    weight: "", //重量
    giftGrowth: "", //成长值
    giftPoint: "", //赠送积分
    usePointLimit: 0, //限制使用积分数
    attrGroupId: -1, //属性分组id
    baseAttrs: [], //基本属性列表
    skuList: [], //sku规格列表
    sort: 0,
    detailHtml: "", //pc端详情
    detailMobileHtml: "", //移动端详情
    manySku: false, //是否多规格
    createBy: "",
    createTime: "",
    updateBy: "",
    updateTime: "",
    remark: ""
  })
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);
console.log("newFormInline", newFormInline.value);
console.log("newFormInline", newFormInline.value);

const {
  onSearchCategoty,
  getBrandByCd,
  loadGoodDetail,
  getAttrGroups,
  getAttrByGroupAndCid
} = useHook();

const state = reactive({
  loaded: false,
  active: 0,
  specForm: {
    specList: [] as any[]
  },
  skuForm: {
    skuList: [] as any[]
  },
  // 规格项表格标题
  specTitles: [] as any[],
  rules: {
    goods: <FormRules>{
      name: [{ required: true, message: "请填写商品名称", trigger: "blur" }],
      subTitle: [
        { required: true, message: "请填写商品副标题", trigger: "blur" }
      ],
      productSn: [
        { required: true, message: "请填写商品编号", trigger: "blur" }
      ],
      brandId: [{ required: true, message: "请选择品牌", trigger: "change" }],
      picUrl: [{ required: true, message: "请上传主图", trigger: "blur" }],

      weight: [{ required: true, message: "请填写重量", trigger: "blur" }]
    },
    baseAttr: <FormRules>{
      name: [{ required: true, message: "请填写属性名称", trigger: "blur" }],
      value: [{ required: true, message: "请填写属性值", trigger: "blur" }]
    },
    spec: <FormRules>{
      name: [{ required: true, message: "请输入规格名称", trigger: "blur" }],
      value: [{ required: true, message: "请输入规格值", trigger: "blur" }]
    },
    sku: <FormRules>{
      skuSn: [{ required: true, message: "请输入商品编号", trigger: "blur" }],
      price: [{ required: true, message: "请输入商品价格", trigger: "blur" }],
      stockNum: [{ required: true, message: "请输入商品库存", trigger: "blur" }]
    }
  },
  colors: ["", "success", "warning", "danger"],
  tagInputs: [{ value: undefined, visible: false }] // 规格值标签临时值和显隐控制
});

const {
  loaded,
  active,
  specForm,
  skuForm,
  specTitles,
  rules,
  colors,
  tagInputs
} = toRefs(state);

//基本属性

function handleAdd() {
  newFormInline.value.baseAttrs.push({});
}

function handleRemove(index: number) {
  newFormInline.value.baseAttrs.splice(index, 1);
}

//库存 规格
const specFormRef = ref(ElForm);
const skuFormRef = ref(ElForm);

/**
 * 添加规格
 */
function handleSpecAdd() {
  if (state.specForm.specList.length >= 3) {
    ElMessage.warning("最多支持3组规格");
    return;
  }
  state.specForm.specList.push({ values: [] });
  state.tagInputs.push({ value: undefined, visible: false });
  handleSpecReorder();
}

/**
 * 删除规格
 * @param index
 */
function handleSpecRemove(index: any) {
  state.specForm.specList.splice(index, 1);
  state.tagInputs.splice(index, 1);
  generateSkuList();
  handleSpecReorder();
  handleSpecChange();
}

/**
 * 规格列表重排序
 */
function handleSpecReorder() {
  state.specForm.specList.forEach((item, index) => {
    item.index = index;
  });
}

/**
 * 生成SKU列表的title
 */
function handleSpecChange() {
  const specList = JSON.parse(JSON.stringify(state.specForm.specList));
  state.specTitles = specList.map((item: any) => item.name);
}

/**
 * 添加规格值
 *
 * @param specIndex
 */
function handleSpecValueAdd(specIndex: any) {
  state.tagInputs[specIndex].visible = true;
}

/**
 *  删除规格值
 *
 * @param rowIndex
 * @param specValueId
 */
function handleSpecValueRemove(rowIndex: any, specValueId: any) {
  const specList = JSON.parse(JSON.stringify(state.specForm.specList));
  const removeIndex = specList[rowIndex].values
    .map((item: any) => item.id)
    .indexOf(specValueId);
  specList[rowIndex].values.splice(removeIndex, 1);
  state.specForm.specList = specList;
  generateSkuList();
  handleSpecChange();
  handleSpecReorder();
}

/**
 *  根据商品规格笛卡尔积生成SKU列表
 *
 * 规格列表：
 * [
 *    { 'id':1,'name':'颜色','values':[{id:1,value:'白色'},{id:2,value:'黑色'},{id:3,value:'蓝色'}] },
 *    { 'id':2,'name':'版本','values':[{id:1,value:'6+128G'},{id:2,value:'8+128G'},{id:3,value:'8G+256G'}] }
 * ]
 */
function generateSkuList() {
  // 如果规格为空，生成SKU列表为空
  if (state.specForm.specList.length == 0) {
    state.skuForm.skuList = [];
    return;
  }

  const specList = JSON.parse(
    JSON.stringify(
      state.specForm.specList.filter(
        item => item.values && item.values.length > 0
      )
    )
  );

  /**
   * 深拷贝，取有属性的规格项，否则笛卡尔积运算得到的SKU列表值为空
   */
  const skuList = specList.reduce(
    (acc: any, curr: any) => {
      let result = [] as any[];
      acc.forEach((item: any) => {
        // curr => { 'id':1,'name':'颜色','values':[{id:1,value:'白色'},{id:2,value:'黑色'},{id:3,value:'蓝色'}] }
        curr.values.forEach((v: any) => {
          // v=>{id:1,value:'白色'}
          let temp = Object.assign({}, item);
          temp.specValues += v.value + "_"; // 规格值拼接
          temp.specIds += v.id + "|"; // 规格ID拼接
          result.push(temp);
        });
      });
      return result;
    },
    [{ specValues: "", specIds: "" }]
  );

  skuList.forEach((item: any) => {
    item.specIds = item.specIds.substring(0, item.specIds.length - 1);
    item.name = item.specValues
      .substring(0, item.specValues.length - 1)
      .replaceAll("_", " ");
    const specIdArr = item.specIds.split("|");
    const skus = newFormInline.value.skuList.filter(
      (sku: any) =>
        sku.specIdArr.length === specIdArr.length &&
        sku.specIdArr.every((a: any) => specIdArr.some((b: any) => a === b)) &&
        specIdArr.every((x: any) => sku.specIdArr.some((y: any) => x === y))
    ); // 数据库的SKU列表

    if (skus && skus.length > 0) {
      const sku = skus[0];
      item.id = sku.id;
      item.skuSn = sku.skuSn;
      item.price = sku.price / 100;
      item.stockNum = sku.stockNum;
    }
    const specValueArr = item.specValues
      .substring(0, item.specValues.length - 1)
      .split("_"); // ['黑','6+128G','官方标配']
    specValueArr.forEach((v: any, i: any) => {
      const key = "specValue" + (i + 1);
      item[key] = v;
      if (i == 0 && state.specForm.specList.length > 0) {
        const valueIndex = state.specForm.specList[0].values.findIndex(
          (specValue: any) => specValue.value == v
        );
        if (valueIndex > -1) {
          item.picUrl = state.specForm.specList[0].values[valueIndex].picUrl;
        }
      }
    });
  });
  state.skuForm.skuList = JSON.parse(JSON.stringify(skuList));
}

/**
 * 规格值输入
 */
function handleSpecValueInput(rowIndex: any) {
  const currSpecValue = state.tagInputs[rowIndex].value;
  const specValues = state.specForm.specList[rowIndex].values;
  if (
    specValues &&
    specValues.length > 0 &&
    specValues.map((item: any) => item.value).includes(currSpecValue)
  ) {
    ElMessage.warning("规格值重复，请重新输入");
    return false;
  }
  if (currSpecValue) {
    if (specValues && specValues.length > 0) {
      // 临时规格值ID tid_1_1
      let maxSpecValueIndex = specValues
        .filter((item: any) => item.id.includes("tid_"))
        .map((item: any) => item.id.split("_")[2])
        .reduce((acc: any, curr: any) => {
          return acc > curr ? acc : curr;
        }, 0);
      state.specForm.specList[rowIndex].values[specValues.length] = {
        value: currSpecValue,
        id: "tid_" + (rowIndex + 1) + "_" + ++maxSpecValueIndex
      };
    } else {
      state.specForm.specList[rowIndex].values = [
        { value: currSpecValue, id: "tid_" + (rowIndex + 1) + "_1" }
      ];
    }
  }
  state.tagInputs[rowIndex].value = undefined;
  state.tagInputs[rowIndex].visible = false;
  generateSkuList();
}

/**
 * 合并规格单元格
 *
 * @param cellObj 单元格对象
 */

const objectSpanMethod = ({ rowIndex, columnIndex }: any) => {
  let mergeRows = [1, 1, 1]; // 分别对应规格1、规格2、规格3列合并的行数
  const specLen = state.specForm.specList.filter(
    item => item.values && item.values.length > 0
  ).length;
  if (specLen == 2) {
    const values_len_2 = state.specForm.specList[1].values
      ? state.specForm.specList[1].values.length
      : 1; // 第2个规格项的规格值的数量
    mergeRows = [values_len_2, 1, 1];
  } else if (specLen == 3) {
    const values_len_2 = state.specForm.specList[1].values
      ? state.specForm.specList[1].values.length
      : 1; // 第2个规格项的规格值的数量
    const values_len_3 = state.specForm.specList[2].values
      ? state.specForm.specList[2].values.length
      : 1; // 第3个规格项的规格值的数量
    mergeRows = [values_len_2 * values_len_3, values_len_3, 1];
  }
  if (columnIndex == 0) {
    if (rowIndex % mergeRows[0] === 0) {
      return [mergeRows[0], 1]; // 合并单元格
    } else {
      return [0, 0]; // 隐藏单元格
    }
  }
  if (columnIndex == 1) {
    if (rowIndex % mergeRows[1] === 0) {
      return [mergeRows[1], 1]; // 合并单元格
    } else {
      return [0, 0]; // 隐藏单元格
    }
  }
};

/**
 * 商品表单提交
 */
function submitForm() {
  // // 判断商品SKU列表是否为空
  // if (!state.skuForm.skuList || state.skuForm.skuList.length === 0) {
  //   ElMessage.warning("未添加商品库存");
  //   return false;
  // }
  // specFormRef.value.validate((specValid: any) => {
  //   if (specValid) {
  //     skuFormRef.value.validate((skuValid: any) => {
  //       if (skuValid) {
  //         // 重组商品的规格和SKU列表
  //         let submitsData = Object.assign({}, goodsInfo.value);
  //         delete submitsData.specList;
  //         delete submitsData.skuList;
  //         let specList = [] as any[];
  //         state.specForm.specList.forEach(item => {
  //           item.values.forEach((value: any) => {
  //             value.name = item.name;
  //           });
  //           specList = specList.concat(item.values);
  //         });
  //         submitsData.specList = specList; // 规格列表
  //         submitsData.price *= 100; // 金额转成分保存至数据库
  //         submitsData.originPrice *= 100;
  //         let skuList = JSON.parse(JSON.stringify(state.skuForm.skuList));
  //         skuList.map((item: any) => {
  //           item.price *= 100;
  //           return item;
  //         });
  //         submitsData.skuList = skuList;
  //         console.log("提交数据", submitsData);
  //         const goodsId = goodsInfo.value.id;
  //         if (goodsId) {
  //           // 编辑商品提交
  //           updateSpu(goodsId, submitsData).then(() => {
  //             router.push({ path: "/pms/goods" });
  //             ElNotification({
  //               title: "提示",
  //               message: "编辑商品成功",
  //               type: "success"
  //             });
  //           });
  //         } else {
  //           // 新增商品提交
  //           addSpu(submitsData).then(() => {
  //             router.push({ path: "/pms/goods" });
  //             ElNotification({
  //               title: "提示",
  //               message: "新增商品成功",
  //               type: "success"
  //             });
  //           });
  //         }
  //       }
  //     });
  //   }
  // });
}

/**
 * 上一步
 */
function prev() {
  if (state.active-- <= 0) {
    state.active = 0;
  }
}
/**
 * 下一步
 */
function next() {
  if (state.active == 0) {
    //加载品牌
    getBrandByCd(newFormInline.value.platformCategoryId).then(data => {});
    //加载属性
    getAttrGroups(newFormInline.value.platformCategoryId).then(data => {});
    //
  }

  if (state.active++ >= 3) {
    state.active = 0;
  }
}

function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });
onMounted(async () => {
  if (!newFormInline.value.id) {
    let res = await onSearchCategoty();
    console.log("res", res);
    if (res) {
      newFormInline.value.dictOptionData["categotyList"] = res;
    }
  }
});
</script>

<template>
  <div class="app-container">
    <el-steps
      :active="active"
      process-status="primary"
      finish-status="success"
      simple
    >
      <el-step title="选择商品分类" />
      <el-step title="填写商品信息" />
      <el-step title="设置商品属性" />
      <el-step title="设置商品库存" />
    </el-steps>
    <!-- 分类 -->
    <div class="component-container" v-show="active == 0">
      <div class="component-container__main">
        <el-cascader-panel
          ref="categoryRef"
          :options="newFormInline.dictOptionData['categotyList']"
          v-model="newFormInline.platformCategoryId"
          :props="{
            value: 'id',
            label: 'name',
            emitPath: false,
            checkStrictly: false
          }"
        />
      </div>
      <div class="component-container__footer">
        <el-button type="primary" @click="next">下一步，填写商品信息</el-button>
      </div>
    </div>
    <!-- 基本信息 -->
    <div class="component-container" v-show="active == 1">
      <div class="component-container__main">
        <el-form
          ref="dataFormRef"
          :rules="rules.goods"
          :model="newFormInline"
          label-width="120px"
        >
          <el-form-item label="商品名称" prop="name">
            <el-input style="width: 400px" v-model="newFormInline.name" />
          </el-form-item>
          <el-form-item label="商品副标题" prop="subTitle">
            <el-input style="width: 400px" v-model="newFormInline.subTitle" />
          </el-form-item>

          <el-form-item label="商品品牌" prop="brandId">
            <el-select
              v-model="newFormInline.brandId"
              style="width: 400px"
              clearable
            >
              <el-option
                v-for="item in newFormInline.dictOptionData['brandList']"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="商品主图" prop="picUrl">
            <single-upload v-model="newFormInline.picUrl"></single-upload>
          </el-form-item>

          <el-form-item label="商品轮播图">
            <multi-upload v-model="newFormInline.subPicUrls"></multi-upload>
          </el-form-item>

          <el-form-item label="pc端详情" prop="detailHtml">
            <editor v-model="newFormInline.detailHtml" style="height: 600px" />
          </el-form-item>
          <el-form-item label="移动端详情" prop="detailMobileHtml">
            <editor
              v-model="newFormInline.detailMobileHtml"
              style="height: 600px"
            />
          </el-form-item>
        </el-form>
      </div>
      <div class="component-container__footer">
        <el-button @click="prev">上一步，选择商品分类</el-button>
        <el-button type="primary" @click="next">下一步，设置商品属性</el-button>
      </div>
    </div>
    <!-- 商品属性 -->
    <div class="component-container" v-show="active == 2">
      <div class="component-container__main">
        <el-card class="box-card">
          <template #header>
            <span>商品属性</span>
            <el-button
              style="float: right"
              type="success"
              :icon="Plus"
              size="small"
              @click="handleAdd"
            >
              添加属性
            </el-button>
            <el-button>重载属性</el-button>
          </template>
          <el-form
            ref="dataFormRef"
            :model="newFormInline"
            :rules="rules.baseAttr"
            size="small"
            :inline="true"
          >
            <el-table
              :data="newFormInline.baseAttrs"
              size="small"
              highlight-current-row
              border
            >
              <el-table-column property="name" label="属性名称">
                <template #default="scope">
                  <el-form-item
                    :prop="'attrList[' + scope.$index + '].name'"
                    :rules="rules.name"
                  >
                    <el-input v-model="scope.row.name" />
                  </el-form-item>
                </template>
              </el-table-column>

              <el-table-column property="value" label="属性值">
                <template #default="scope">
                  <el-form-item
                    :prop="'attrList[' + scope.$index + '].value'"
                    :rules="rules.value"
                  >
                    <el-input v-model="scope.row.value" />
                  </el-form-item>
                </template>
              </el-table-column>

              <el-table-column label="操作" width="150">
                <template #default="scope">
                  <el-form-item>
                    <el-button
                      v-if="scope.$index > 0"
                      type="danger"
                      :icon="Minus"
                      size="small"
                      circle
                      plain
                      @click.stop="handleRemove(scope.$index)"
                    />
                  </el-form-item>
                </template>
              </el-table-column>
            </el-table>
          </el-form>
        </el-card>
      </div>
      <div class="component-container__footer">
        <el-button @click="prev">上一步，填写商品信息</el-button>
        <el-button type="primary" @click="next">下一步，设置商品库存</el-button>
      </div>
    </div>

    <!-- 商品库存 -->
    <div class="component-container" v-show="active == 3">
      <div class="component-container__main">
        <el-card class="box-card">
          <template #header>
            <span>商品规格</span>
            <el-button
              :icon="Plus"
              type="success"
              @click="handleSpecAdd"
              size="small"
              style="float: right"
            >
              添加规格项
            </el-button>
          </template>

          <el-form
            ref="specFormRef"
            :model="specForm"
            :inline="true"
            size="small"
          >
            <el-table
              ref="specTableRef"
              :data="specForm.specList"
              row-key="id"
              size="small"
            >
              <el-table-column align="center" width="50">
                <template>
                  <svg-icon class="drag-handler" icon-class="drag" />
                </template>
              </el-table-column>
              <el-table-column label="规格名" width="200">
                <template #default="scope">
                  <el-form-item
                    :prop="'specList[' + scope.$index + '].name'"
                    :rules="rules.spec.name"
                  >
                    <el-input
                      type="text"
                      v-model="scope.row.name"
                      size="small"
                      @input="handleSpecChange()"
                    />
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column>
                <template #header>
                  规格值
                  <el-link
                    type="danger"
                    style="font-size: 12px"
                    :underline="false"
                    >（默认第一条规格包含图片）</el-link
                  >
                </template>

                <template #default="scope">
                  <div
                    v-for="item in scope.row.values"
                    :key="item.id"
                    style="margin-right: 15px; display: inline-block"
                  >
                    <el-tag
                      size="small"
                      closable
                      :type="colors[scope.$index % colors.length]"
                      @close="handleSpecValueRemove(scope.$index, item.id)"
                    >
                      {{ item.value }}
                    </el-tag>
                    <single-upload
                      v-model="item.picUrl"
                      v-if="scope.$index == 0"
                      style="margin-top: 5px"
                    />
                  </div>

                  <el-input
                    v-if="
                      tagInputs.length > 0 && tagInputs[scope.$index].visible
                    "
                    v-model="tagInputs[scope.$index].value"
                    @keyup.enter="handleSpecValueInput(scope.$index)"
                    @blur="handleSpecValueInput(scope.$index)"
                    style="width: 80px; vertical-align: top"
                    size="small"
                  />
                  <el-button
                    v-else
                    @click="handleSpecValueAdd(scope.$index)"
                    :icon="Plus"
                    style="vertical-align: top"
                    size="small"
                  >
                    添加规格值
                  </el-button>
                </template>
              </el-table-column>

              <el-table-column width="60" label="操作">
                <template #default="scope">
                  <el-button
                    type="danger"
                    :icon="Minus"
                    size="small"
                    circle
                    plain
                    @click.stop="handleSpecRemove(scope.$index)"
                  />
                </template>
              </el-table-column>
            </el-table>
          </el-form>
        </el-card>

        <el-card class="box-card">
          <template #header>
            <span>商品库存</span>
          </template>
          <el-form
            ref="skuFormRef"
            :model="skuForm"
            size="small"
            :inline="true"
          >
            <el-table
              :data="skuForm.skuList"
              :span-method="objectSpanMethod"
              highlight-current-row
              size="small"
              border
            >
              <el-table-column
                v-for="(title, index) in specTitles"
                :key="index"
                align="center"
                :prop="'specValue' + (index + 1)"
                :label="title"
              >
              </el-table-column>

              <el-table-column label="商品编码" align="center">
                <template #default="scope">
                  <el-form-item
                    :prop="'skuList[' + scope.$index + '].skuSn'"
                    :rules="rules.sku.skuSn"
                  >
                    <el-input v-model="scope.row.skuSn" />
                  </el-form-item>
                </template>
              </el-table-column>

              <el-table-column label="价格" align="center">
                <template #default="scope">
                  <el-form-item
                    :prop="'skuList[' + scope.$index + '].price'"
                    :rules="rules.sku.price"
                  >
                    <el-input v-model="scope.row.price" />
                  </el-form-item>
                </template>
              </el-table-column>

              <el-table-column label="库存" align="center">
                <template #default="scope">
                  <el-form-item
                    :prop="'skuList[' + scope.$index + '].stockNum'"
                    :rules="rules.sku.stockNum"
                  >
                    <el-input v-model="scope.row.stockNum" />
                  </el-form-item>
                </template>
              </el-table-column>
            </el-table>
          </el-form>
        </el-card>
      </div>
      <div class="component-container__footer">
        <el-button @click="prev">上一步，设置商品属性</el-button>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.component-container {
  &__main {
    margin: 20px auto;
  }

  &__footer {
    position: fixed;
    bottom: 20px;
    right: 20px;
  }

  .box-card {
    margin-bottom: 20px;
  }
}

.el-form--inline .el-form-item {
  margin-top: 18px;
}
</style>
